import { loadingRef, createLoad, hideLoad } from "../utils/utils.js"
import { HeaderComponent } from "./header.js"
import { requests } from "../utils/request.js"

//DOMContentLoaded：解析完脚本文件后执行
window.addEventListener('DOMContentLoaded', function () {
    const header = new HeaderComponent()
    const page = new JournalPage(header)
    //语言切换方法
    header.languageFn = page.createContainer.bind(page)
    page.createContainer()
})
class JournalPage {
    #journalList = []//日志列表
    #journalTypeList = {}//日志类型
    #journalTitle = ""//标题数据
    #loading = loadingRef(false, createLoad, hideLoad)//加载动画控制
    #header = {}//header组件实例
    #iconPath = "/static/images/icon/"
    constructor(header) {
        this.#header = header
    }
    //创建内容
    createContainer() {
        this.#loading.vaue = true
        this.#getJournalData().then(res=>{
            this.#journalTitle = res.TITLE
            this.#journalTypeList = res.JOURNAL_TYPE_LIST
            this.#journalList = res.JOURNAL_LIST
            this.#updateContainer()
            setTimeout(()=>{
                this.#loading.vaue = false
            },1000)
        })
    }
    //
    #updateContainer(){
        this.#createJournalTitleElement()
        this.#createJournalTypeTipsElement()
        this.#createJournalListElement()
        this.#createLinkList()
    }
    //获取日志数据
    #getJournalData(){
        return requests.get(`/data/journal/${this.#header.languageKey}.json`)
    }
    //创建内容标题
    #createJournalTitleElement() {
        const box = document.getElementsByTagName("h1")[0]
        box.innerText = this.#journalTitle
    }
    //创建日志类型提示
    #createJournalTypeTipsElement() {
        const box = document.getElementsByClassName("journal-tips")[0]
        box.innerHTML = ""
        this.#journalTypeList.forEach(item => {
            const p = document.createElement("p")
            const spanIcon1 = document.createElement("span")
            const spanIcon2 = document.createElement("span")
            spanIcon1.setAttribute("class", "image-icon")
            spanIcon1.style.backgroundImage = `url(${this.#iconPath}${item.icon}.png)`
            spanIcon2.innerText = "：" + item.text
            p.appendChild(spanIcon1)
            p.appendChild(spanIcon2)
            box.appendChild(p)
        })
    }
    //创建日志列表
    #createJournalListElement() {
        const box = document.getElementsByClassName("journal-container-list")[0]
        box.innerHTML = ""
        this.#journalList.forEach(item => {
            const title = document.createElement("h2")
            title.setAttribute("id", item.date)
            title.innerText = item.date
            box.appendChild(title)
            const ul = document.createElement("ul")
            ul.setAttribute("class", "journal-container-list-ul")
            item.list.forEach(citem => {
                const li = document.createElement("li")
                const spanIcon1 = document.createElement("span")
                spanIcon1.setAttribute("class", "icon image-icon")
                spanIcon1.style.backgroundImage = `url(${this.#iconPath}${citem.icon}.png)`
                const spanIcon2 = document.createElement("span")
                spanIcon2.setAttribute("class", "text")
                spanIcon2.innerHTML = citem.content
                li.appendChild(spanIcon1)
                li.appendChild(spanIcon2)
                ul.appendChild(li)
            })
            box.appendChild(ul)
        })
    }
    //创建右边跳转滚动列表
    #createLinkList() {
        const ul = document.getElementsByClassName("date-link-list")[0]
        ul.innerHTML = ""
        this.#journalList.forEach((item, index) => {
            const li = document.createElement("li")
            li.setAttribute("class", "ellipsis")
            li.setAttribute("title", item.date)
            li.innerText = item.date
            li.onclick = () => {
                const element = document.getElementById(item.date);
                //滚动到元素区域
                element.scrollIntoView({ behavior: 'smooth' });
            }
            ul.appendChild(li)
        })

    }
}